<template>
<!-- 标题开始 -->
    <div class="login">
     <div class="title">易洁家政</div>
<!--标题结束  -->
<!-- 登录框开始 -->
      <div class="loginForm">
        <div class="form">
            <van-form @submit="onSubmit">
            <van-field
                v-model="form.username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="form.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
            </van-form>
        </div>
      </div>
    </div>
</template> 

<script>
import {post_json} from '../http/axios.js'
export default {
  data(){
      return{
          form:{
              username:'admin1',
              password:'123321'
          }
      }
  },
  methods:{
      onSubmit(){
        //   alert(999)
        // 异步操作
        post_json('user/login',this.form).then(res=>{
            // console.log(res.data);
            if(res.data.status == 200){
                // console.log(res.data.data.token);
                // 将token存储起来
                localStorage.setItem('token',res.data.data.token)
                // 跳转到首页
                this.$router.push({path:'/manager/home'})
            }
        })
      }
  }
}
</script>

<style scoped>
.login{
    height: 100%;
    background-image: linear-gradient(#5098fa,#265aca);
}
.login .title{
        position: relative;
        top: 120px;
        color: #fff;
        font-size: 36px;
}
.login .loginForm{
     padding: 1em;
     position: relative;
     top: 200px;
}

.login .loginForm .form{
         background-color: #fff;
         height: 300px;
         border-radius: 5px;
         padding-top: 20px;
         box-sizing: border-box;
}
</style>